<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>Title</title>
</head>
<body>
<!--添加部门的功能放在外部-->
<!--查询功能,根据城市或者部门名称-->
<form class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label" >部门名称</label>
        <div class="layui-input-inline">
            <input id="name1" name="name"   placeholder="请输入新部门名称" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">所在城市</label>
        <div class="layui-input-inline">
            <input id="city1" name="city"    placeholder="请输入新部门所在城市" autocomplete="off" class="layui-input">
        </div>
        <button type="submit"  lay-submit lay-filter="adddepart" class="layui-btn" >添加新部门</button>
        <button type="submit"  lay-submit lay-filter="search1" class="layui-btn">按照部门名称查找</button>
        <button type="submit"  lay-submit lay-filter="search2" class="layui-btn">按照所在城市查找</button>
    </div>
</form>

<!--隐藏的div,修改的时候调用-->
<script type="text/html" id="edit1">
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-inline">
            <input type="text" name="newname" id="newname"   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所在城市</label>
        <div class="layui-input-inline">
            <input type="text" name="newcity" id="newcity"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button  type="button" id="edit_btn" style="margin-left: 50px" class="layui-btn layui-input-inline"  >确认修改</button>
    </div>
</script>
<!--表格行内控件:修改部门信息、删除部门(该部门的员工必须为空,否则失败)、查看该部门的所有用户信息-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm"  lay-event="show">查看该部门所有员工</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
    </div>
</script>
<table id="demo" lay-filter="test"></table>
<table id="openTable" lay-filter="openTable"></table>

<script src="layui/layui.js"></script>
<script>

    layui.use(['jquery','layer', 'form','element','table'], function() {
        var layer = layui.layer,
            element = layui.element,
            form = layui.form,
            table = layui.table,
            $ = layui.jquery;
        //var fun=
        var tableIns=table.render({
            elem:'#demo',
            /*title:'部门信息管理',*/
            url:'http://localhost:8080/depart/findAll',
            pages:false,
            cols:  [[ //标题栏
                 {field: 'id', title: '部门编号'}
                ,{field: 'name', title: '部门名称'}
                ,{field: 'city', title: '部门所在城市'}
                ,{toolbar: '#toolbarDemo',title: '操作',fixed: 'right'}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": "0", //解析接口状态
                    "msg": "", //解析提示文本
                    "data": res //解析数据列表
                };
            }
        });

        table.on('tool(test)',
            function (obj) {
                let data = obj.data; //获得当前行数据
                let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'show'){
                    //查看对应部门的所有员工，模态框中打开的表格
                    //测试一下layui表格能否在模态框中嵌套成功
                    var staff_id=data.id;
                    console.log(staff_id);
                    layer.open({
                        closeBtn:2,
                        area:['800px','400px'],
                        title:data.name+"的所有员工信息",
                        //content:$('#openTable'),
                        content:'<div id="table"></div>',
                        success:function () {
                            table.render({
                                elem:'#table',
                                id:'#table',
                                /*data:{id:staff_id},*/
                                url:'http://localhost:8080/depart/findByid?id='+staff_id,
                                page:false,
                                cols:  [[ //标题栏
                                    {field: 'id', title: '员工编号'}
                                    ,{field: 'name', title: '员工姓名'}
                                    ,{field: 'phone', title: '手机号码'}
                                    ,{field: 'sex', title: '性别',templet:function(data){
                                        if(data.sex) return "女";
                                        else return "男";}}
                                    ,{field: 'birthday', title: '出生日期'}
                                    ,{field: 'edu', title: '毕业院校'}

                                ]],
                                parseData: function(res){ //res 即为原始返回的数据
                                    return {
                                        "code": "0", //解析接口状态
                                        "msg": "", //解析提示文本
                                        "data": res //解析数据列表
                                    };
                                }


                            })

                        }});

                } else if(layEvent === 'update'){ //编辑
                   // layer.open("编辑")
                    //弹出模态框
                   /* obj.update({
                        content:value
                    });*/
                   var id=data.id;
                    layer.open({
                        type:1,
                        /*area:['800px','400px'],*/
                        title:"修改信息",
                        //content:$('#openTable'),
                        //content:$('#edit1'),
                        //content:'#edit1',
                        content:"    <div class=\"layui-form-item\">\n" +
                            "        <label class=\"layui-form-label\">部门名称</label>\n" +
                            "        <div class=\"layui-input-inline\">\n" +
                            "            <input type=\"text\" name=\"newname\" id=\"newname\"   autocomplete=\"off\" class=\"layui-input\">\n" +
                            "        </div>\n" +
                            "    </div>\n" +
                            "    <div class=\"layui-form-item\">\n" +
                            "        <label class=\"layui-form-label\">所在城市</label>\n" +
                            "        <div class=\"layui-input-inline\">\n" +
                            "            <input type=\"text\" name=\"newcity\" id=\"newcity\"  class=\"layui-input\">\n" +
                            "        </div>\n" +
                            "    </div>\n" +
                            "    <div class=\"layui-form-item\">\n" +
                            "        <button  type=\"button\" id=\"edit_btn\" style=\"margin-left: 50px\" class=\"layui-btn layui-input-inline\"  >确认修改</button>\n" +
                            "    </div>",
                        //success:fun(id,$('#newname').val(),$('#newcity').val())
                        success:function () {
                            //给外部的编辑按钮添加监听事件
                            $('#edit_btn').click(function () {
                                console.log("点我干什么??!!");
                                //首先非空判断 newname newcity
                                var newname=$('#newname').val();
                                 var newcity=$('#newcity').val();

                                /*console.log(newname);
                                console.log(newcity);*/
                                if(newname===''&&newcity==='')
                                {
                                    layer.msg("部门名称和部门所在城市不能都为空");
                                    return false;
                                }
                                else{
                                    let maps;//这个数组就是给后端传的
                                    if(newname!=='')
                                        maps={id:id,name:newname};
                                    if(newcity!=='')
                                        maps={id:id,city:newcity};
                                    if(newname!==''&&newcity!=='')
                                        maps={id:id,name:newname,city:newcity};
                                    console.log(maps);
                                    $.ajax({
                                        url:"http://localhost:8080/depart/set",
                                        data:maps,
                                        type:"post",
                                        dataType:"json",
                                        success:function(data){
                                            if(data===1)
                                            {
                                                layer.msg("修改成功");
                                                /*obj.update({

                                                })*/
                                                tableIns.reload();

                                            }
                                            else
                                            {
                                                layer.msg("修改失败");
                                            }

                                        },
                                        error:function(data){
                                            layer.msg("修改失败");
                                        }
                                    });



                                }


                            })
                        }
                    });


                }
                else if(layEvent==='delete')
                {
                    //删除
                    //layer.open("删除")
                    layer.confirm('真的删除吗', function(index){

                        layer.close(index);
                        let id=data.id;
                        // console.log(data.id);
                        //特别注意:这个index不是表格中对应的id!!!
                        //向服务端发送删除指令
                        $.ajax({
                            url:"http://localhost:8080/depart/delete",
                            data:{id:id},
                            type:"post",
                            dataType:"json",
                            success:function(data){
                                if(data===1)
                                {
                                    layer.msg("删除成功");
                                    obj.del(index); //删除对应行（tr）的DOM结构，并更新缓存
                                }
                                else
                                {
                                    layer.msg("删除失败");
                                }

                                //layer.msg(data.toString());
                            },
                            error:function(data){
                                layer.msg("删除失败");
                            }
                        });

                    });

                }

            });


        //监听顶部的三个按钮
        //输入框的值
        form.on('submit(adddepart)', function(data){
            if(data.field.name===''||data.field.city==='')
            {layer.msg("不能为空");
            return false;}
            else {
                console.log(data);
                $.ajax({
                    url:"http://localhost:8080/depart/add",
                    data:data.field,
                    type:"post",
                    dataType:"json",
                    success:function(data){
                        if(data===1)
                        {
                            layer.msg("添加成功");
                            tableIns.reload();
                        }
                        else
                        {
                            layer.msg("添加失败");
                        }

                        //layer.msg(data.toString());
                    },
                    error:function(data){
                        layer.msg("添加失败");
                    }
                });

            }


            //layer.msg(JSON.stringify(data.field));
            return false;
        });

        //根据名称查找
        form.on('submit(search1)',function (data) {
            data=data.field;
            if(data.name==='')
            {
                layer.msg("部门名称不能为空");
                return fasle;
            }
            else{
                tableIns.reload({
                    method:'post',
                    where:{
                        name:data.name
                    }
                })
            }
            return false;
        });
        //根据城市查找
        form.on('submit(search2)',function (data) {
            data=data.field;
            if(data.city==='')
            {
                layer.msg("城市名称不能为空");
                return fasle;
            }
            else{
                tableIns.reload({
                    method:'post',
                    where:{
                        city:data.city
                    }
                })
            }
            return false;
        })
    });
</script>
</body>
</html>